import styled from 'styled-components';
import React, { CSSProperties, ReactNode, useCallback, useEffect, useState } from 'react';
import {
    ProForm,
    ProFormText,
    ProFormSelect,
    ProFormTextArea,
    ProFormItem
} from '@ant-design/pro-components';
import { Button } from 'antd';

import { ConnectorDataSource } from '../../services';

export interface ConnectorDataSourceFormProps {
    style?: CSSProperties;
    item?: ConnectorDataSource | { [key: string]: any };
    extention?: ReactNode;
    submitTitle?: string;
    onFinish: (datasource: ConnectorDataSource | { [key: string]: any }, options?: { [key: string]: any }) => Promise<void> | void;
}

export const ConnectorDataSourceForm: React.FC<ConnectorDataSourceFormProps> = (props) => {

    const [loading, setLoading] = useState<boolean>(false);

    const requestCallback = useCallback(async () => {
        console.log('---------', props.item);
        if (!props.item) return {
            protocol: 'mysql',
            url: 'mysql://root:6e4a1a8993be1628@39.106.1.82:8306/rrai_prod',
            database_type: 'mysql',
        };
        return props.item;
    }, [props.item]);

    useEffect(() => { }, [props.item])

    return (
        <Container>
            <ProForm<ConnectorDataSource>
                initialValues={props.item}
                request={requestCallback}
                onFinish={async (values) => {
                    //TODO 校验
                    values = {
                        protocol: values.database_type,
                        ...props.item,
                        ...values,
                    };
                    setLoading(true);
                    try {
                        await props.onFinish(values, {});
                    } catch (error) {
                        console.error(error);
                    }
                    setLoading(false);
                }}
                submitter={false}
            >

                <ProFormSelect
                    rules={[{ required: true }]}
                    fieldProps={{}}
                    options={[
                        {
                            value: 'sqlite',
                            label: 'SQLite',
                        },
                        {
                            value: 'mysql',
                            label: 'MySQL',
                        },
                    ]}
                    name="database_type"
                    label="数据库类型" />

                <ProFormText
                    rules={[{ required: true }]}
                    width="xl" fieldProps={{}}
                    name="url"
                    label="地址" />

                <ProFormText
                    width="xl" fieldProps={{}}
                    name="username"
                    label="用户名" />

                <ProFormText.Password
                    width="xl"
                    fieldProps={{}}
                    name="password"
                    label="密码" />
                {
                    props.extention
                }
                <ProFormItem>
                    <Button loading={loading} type="primary" htmlType="submit">
                        {props.submitTitle ? props.submitTitle : '添加'}
                    </Button>
                </ProFormItem>
            </ProForm>
        </Container>
    );
}

const Container = styled.div`
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
`;